import React, {Component} from 'react';
import { connect } from 'react-redux'
import './login.less'
import Header from '@/components/header/header'
import {Button} from 'antd-mobile';
import {NavLink} from 'react-router-dom'
import { getImgCode } from '@/api/api'
import {saveFormData} from '@/redux/login/action'

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loginLoading: false,
            phone: '',
            psd: '',
            imgCode: '',
            showImgCode: ''
        };
    }

    componentDidMount() {
        this.initData();
        console.log(this.props.User)
    }

    initData = async () => {
        let result = await getImgCode();
        this.setState({
            showImgCode: result.code
        });
    };
    getImgCode = () => {
        this.initData();
    };
    goSubmit = async () => {
        /*const {phone, psd, imgCode} = this.state;
        if (!phone) {
            Toast.fail('手机号不能为空', 1.5);
            return;
        }
        let reg = /^[1][3-8][0-9]{9}/;
        if (!reg.test(phone)) {
            Toast.fail('请输入正确的手机号', 1.5);
            return;
        }
        if (!psd) {
            Toast.fail('请输入密码', 1.5);
            return;
        }
        if (!imgCode || imgCode.length !== 4) {
            Toast.fail('请输入4位验证码', 1.5);
            return;
        }
        let result = await login({
            username: phone,
            password: psd,
            captcha_code: imgCode
        });
        if(result){
            this.props.history.push('/index');
            this.setState({
                loginLoading: true
            });
        }*/
        //this.props.User;
    };
    changeState = (v, key) => {
        this.setState({
            [key]: v.target.value,
        })
    };
    handleInput = (type, event) => {
        let value = event.target.value;
        this.props.saveFormData(value, type);
    };

    render() {
        return (
            <div className="login">
                <Header title={"登录"}/>
                <ul className="ul-input">
                    <li><input style={{width: "100%"}} type="tel" maxLength={11} value={this.props.formData.name}
                               placeholder={"请输入手机号码"}
                               onChange={this.handleInput.bind(this, 'name')}/></li>
                    <li><input style={{width: "100%"}} type="password" minLength={6} maxLength={16}
                               value={this.state.psd} placeholder={"请输入密码"}
                               onChange={v => this.changeState(v, 'psd')}/></li>
                    <li>
                        <input style={{width: "60%"}} type="text" maxLength={4} value={this.state.imgCode}
                               placeholder={"请输入图形验证码"}
                               onChange={v => this.changeState(v, 'imgCode')}/>
                        <img className="imgCode"
                             alt=""
                             src={this.state.showImgCode} onClick={this.getImgCode}/>
                    </li>
                </ul>
                <div className="bottom">
                    <p className="explain"><span>温馨提示：</span>未注册过的账号，登录时将自动注册;</p>
                    {this.state.loginLoading ? <Button type="primary" disabled>登录</Button> :
                        <Button type="primary" onClick={this.goSubmit}>登录</Button>}
                    <NavLink to="/findPsd"><p className="resetPsd">重置密码?</p></NavLink>
                </div>
            </div>
        );
    }
}

export default connect(state => ({
    formData: state.formData
}), {
    saveFormData
})(Login);
